<template>
  <div class="app-container">

    <h2 >当前最新价：<span style="color: red">{{this.$route.query.trade}}</span></h2>
    <div class="container">
      <div class="left-container">
        <!-- 左侧内容    卖出-->
        <div v-if="this.$route.query.state==2">
          <br><br><br>
          <h1>{{buyForm.name}}</h1><br>
          <el-input v-model="sellForm.symbol" @change="symbolChange(sellForm.symbol)" style="width: 300px;height: 40px" placeholder="股票代码"></el-input><br><br><br>
          <el-input-number v-model="sellForm.sellPrice" style="width: 300px;height: 40px"  :min="0" :step="0.01" placeholder="卖出价"></el-input-number>
          <br><br><br>
          <el-input-number v-model="sellForm.num" style="width: 300px;height: 40px" @blur="sellNumChange(sellForm.num)" placeholder="卖出量"></el-input-number><br><br>
          <el-button
            type="danger"
            style="width: 300px;height: 40px"
            size="mini"
            @click="selling"
          >卖出</el-button>
        </div>
<!--       买入 -->
        <div v-if="this.$route.query.state==1">
          <br><br><br>
          <h1>{{buyForm.name}}</h1><br>
          <el-input v-model="buyForm.symbol" @change="symbolChange(buyForm.symbol)" style="width: 300px;height: 40px" placeholder="股票代码"></el-input><br><br><br>
          <el-input-number v-model="buyForm.buyPrice" style="width: 300px;height: 40px" :step="0.01" :min="0" placeholder="买入价"></el-input-number>
          <br><br><br>
          <el-input-number v-model="buyForm.num" style="width: 300px;height: 40px" :min="0" @blur="numChange(buyForm.num)" placeholder="买入量"></el-input-number><br><br>
          <el-button
            type="danger"
            style="width: 300px;height: 40px"
            size="mini"
            @click="buying"
          >买入</el-button>
        </div>
      </div>
      <div class="right-container">
        <!-- 右侧内容 -->
        <div class="top-container">
          <!-- 上方内容 -->
          <el-table
            show-header:false
            :data="sellData"
            style="width: 250px;height: 250px"
            @row-click="getSellPrice"
            >
            <el-table-column
              fixed
              prop="name"
              width="80">
            </el-table-column>
            <el-table-column
              prop="sellPrice"
              width="80">
            </el-table-column>
            <el-table-column
              prop="hands"
              width="80">
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom-container">
          <!-- 下方内容 -->
          <el-table
            show-header:false
            :data="buyData"
            @row-click="getBuyPrice"
            style="width: 250px;height: 250px">
            <el-table-column
              fixed
              prop="name"
              width="80">
            </el-table-column>
            <el-table-column
              prop="buyPrice"
              width="80">
            </el-table-column>
            <el-table-column
              prop="hands"
              width="80">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {buyList, getBuyAndSellBySymbol, getBuying, getNameBySymbol, getSelling, getSellList} from "@/api/stock/stock";

export default {
  name: "buyIndex",
  data(){
    return{
      wsUrl: 'ws://127.0.0.1:8080/test/one',
      // ws地址
      websock: null, // ws实例,
      buyForm:{
        symbol:this.$route.query.symbol,
        buyPrice:'',
        num:''
      },
      buyData:[],
      sellData:[],
      sellForm:{
        symbol:this.$route.query.symbol,
        buyPrice:'',
        num:''
      }
    }
  },methods:{
    getNameBySymbol(){
      let symbol = this.$route.query.symbol;
      //alert(symbol)
      getNameBySymbol(symbol).then(res=>{
        this.buyForm=res.data
      })
    },/*获取买入的列表*/
    // getBuyList(){
    //   let trade = this.$route.query.trade;
    //   let symbol = this.$route.query.symbol;
    //   buyList(symbol,trade).then(res=>{
    //     this.buyData = res.data;
    //   })
    // },/*获取卖出的列表*/
    // sellList(){
    //   let trade = this.$route.query.trade;
    //   let symbol = this.$route.query.symbol;
    //   getSellList(symbol,trade).then(res=>{
    //     this.sellData = res.data;
    //   })
    // },

    symbolChange(symbol){
      //alert(symbol)
      this.buyForm.buyPrice=''
      this.sellForm.sellPrice=''
      getNameBySymbol(symbol).then(res=>{
        getSellList(symbol,res.data.trade).then(res=>{
          this.sellData = res.data;
        })
        buyList(symbol,res.data.trade).then(res=>{
          this.buyData = res.data;
        })
        // this.websocketclose();
        // this.initWebSocket();
        this.buyForm.name = res.data.name;
        // this.$route.query.trade=res.data.trade;
        // this.$route.query.symbol=res.data.symbol;
        const urlParams = new URLSearchParams(window.location.search);
        const symbol = urlParams.get('symbol');
        const trade = urlParams.get("trade");

// 修改symbol的值
        urlParams.set('symbol', res.data.symbol);
        urlParams.set('trade', res.data.trade);
        // 构建新URL
        const newUrl = window.location.origin + window.location.pathname + '?' + urlParams.toString();
// 重定向到新URL
        window.location.href = newUrl;
      })
    },/*给卖出的买入价赋值*/
    getBuyPrice(row){
      //alert(row)
      console.log("222====="+row.buyPrice)
      //this.buyForm.buyPrice = row.buyPrice;
      this.sellForm.sellPrice=row.buyPrice
    },/*给卖出的卖出价赋值*/
    getSellPrice(row){
      //alert(row)
      this.buyForm.buyPrice=row.sellPrice
      //this.sellForm.sellPrice = row.sellPrice;
    },buying(){
      this.$confirm('是否确认买入?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //console.log(this.buyForm)
        getBuying(this.buyForm).then(res=>{
            //alert(res.data)
          if(res.msg==201){
            this.$modal.msgError("余额不足");

            this.$confirm('是否前往充值', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$router.push({path:'/stock/myAccount'})
            });
          }
          else{
            this.$modal.msgSuccess("提交成功");
           // this.$router.go(0)
          }
        })
      });
    },numChange(num){
      const tensDigit = Math.floor(num / 10) % 10;
      if (tensDigit >= 5) {
        this.buyForm.num = Math.ceil(num / 100) * 100;
      } else {
        this.buyForm.num = Math.floor(num / 100) * 100;
      }
    },sellNumChange(num){
      const tensDigit = Math.floor(num / 10) % 10;
      if (tensDigit >= 5) {
        this.sellForm.num = Math.ceil(num / 100) * 100;
      } else {
        this.sellForm.num = Math.floor(num / 100) * 100;
      }
    },/*卖出*/
    selling(){
      this.$confirm('是否确认卖出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getSelling(this.sellForm).then(res=>{
          if(res.code==200){
            this.$modal.msgSuccess("提交成功");
            //this.$router.go(0)
          }
          else{
            this.$modal.msgError(res.data.msg);
          }
        })
      });
    },initWebSocket() {
      if (typeof WebSocket === 'undefined')
        return console.log('您的浏览器不支持websocket')
      this.websock = new WebSocket(this.wsUrl)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() {
      let symbol = this.$route.query.symbol;
      //alert(symbol)
      let trade = this.$route.query.trade;
      // 连接建立之后执行send方法发送数据
      let actions = { symbol:symbol,trade:trade}
      this.websocketsend(JSON.stringify(actions))

    },
    websocketonerror() {
      // 连接建立失败重连
      this.initWebSocket()
    },
    websocketonmessage(e) {
      // 数据接收
      const redata = e.data
      let parse = JSON.parse(redata);
      console.log('接收的数据', parse.sysSell)//d
      this.sellData = parse.sysSell;
      console.log('接收的数据', "=============")//d
      console.log('接收的数据', parse.sysBuys)//d
      this.buyData = parse.sysBuys;
    },
    websocketsend(Data) {
      // 数据发送
      this.websock.send(Data)
    },
    websocketclose(e) {
      // 关闭
      console.log('断开连接', e)
    },

  },created() {
      this.getNameBySymbol()
      //this.getBuyList();
     // this.sellList();
  },mounted() {
    this.initWebSocket();//初始化websocket
  }, destroyed() {
    // 离开路由之后断开websocket连接
    this.websock.close()
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.container {

  width: 1200px;
  height: 500px;
  display: flex;
  justify-content: space-between;
}

.left-container {
  border: 1px solid black;
  height: 500px;
  text-align: center;

  flex: 1;
  /* 其他样式 */
}

.right-container {

  height: 500px;
  width: 200px;
  flex: 1;
  /* 其他样式 */
}
.top-container {
  /* 上方内容的样式 */

  height: 250px;

  flex: 1;
}

.bottom-container {
  /* 下方内容的样式 */


  flex: 1;
}
</style>
